<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="../js/ccv.js"></script>
<script type="text/javascript" src="../js/face.js"></script>
  <script src="/_ah/channel/jsapi"></script>
  <style type="text/css">
* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
body {font-family: 'Helvetica';background-color: #000000; }
a:link { color: #ffffff; } a:visited {color: #ffffff; }

#localCanvas {
    display: block;
    position: absolute;  
    width: 100%;
    height: 100%;
}

#localVideo {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -webkit-transition-property: opacity;
		-webkit-transition-duration: 2s;
    opacity: 0;
}
#logo {
    display: block;
    top:4;
    right:4;
    position:absolute;
    float:right;    
    #opacity: 0.8;    
}

#credit {
    display: block;
    top:28;
    right:4;
    position:absolute;
    float:right; 
    font-size:10px;    
}

  </style>
  <title>WebRTC Face Reco Demo Application</title>
</head>
<body>
<script type="text/javascript">
var localVideo;
var localCanvas;
//var worker = new Worker('ccv.js');

initialize = function() {
localVideo = document.getElementById("localVideo");
localCanvas = document.getElementById("localCanvas");
getUserMedia();
}

getUserMedia = function() {
try { navigator.webkitGetUserMedia({video:true,audio:true}, onGotStream, onFailedStream);
//trace("Requested access to local media");
} catch (e) {
alert("getUserMedia error " + e);
//trace_e(e, "getUserMedia error");
}
}

poll = function() {  
  var w = localVideo.videoWidth;
	var h = localVideo.videoHeight;
	var canvas = document.createElement('canvas');
	canvas.width  = w;
	canvas.height = h;
	var ctx = canvas.getContext('2d');
	ctx.drawImage(localVideo, 0, 0, w, h);  
  var comp = ccv.detect_objects({ "canvas" : ccv.grayscale(canvas),
										"cascade" : cascade,
										"interval" : 5,
										"min_neighbors" : 1 });    
		/* draw detected area */
    
    
    //localCanvas.left = 400;
//localCanvas.top = localVideo.top;
/*localCanvas.right = localVideo.right;
localCanvas.bottom = localVideo.bottom;*/
localCanvas.width = localVideo.clientWidth;
localCanvas.height = localVideo.clientHeight;
    var ctx2 = localCanvas.getContext('2d');
    ctx2.lineWidth = 2;
    ctx2.lineJoin = "round";	  
    ctx2.clearRect (0, 0, localCanvas.width,localCanvas.height);  
    var x_offset = 0, y_offset = 0, x_scale = 1, y_scale = 1;
    if (localVideo.clientWidth * localVideo.videoHeight > localVideo.videoWidth * localVideo.clientHeight) {
      x_offset = (localVideo.clientWidth - localVideo.clientHeight * localVideo.videoWidth / localVideo.videoHeight) / 2;
    } else {
      y_offset = (localVideo.clientHeight - localVideo.clientWidth * localVideo.videoHeight / localVideo.videoWidth) / 2;
    }
    x_scale = (localVideo.clientWidth - x_offset * 2) / localVideo.videoWidth;
    y_scale = (localVideo.clientHeight - y_offset * 2) / localVideo.videoHeight;
		for (var i = 0; i < comp.length; i++) {
      comp[i].x = comp[i].x * x_scale + x_offset;
      comp[i].y = comp[i].y * y_scale + y_offset;   
      comp[i].width = comp[i].width * x_scale;
      comp[i].height = comp[i].height * y_scale;
      var opacity = 0.1;
      if (comp[i].confidence > 0) {
        opacity += comp[i].confidence / 10;
        if (opacity > 1.0) opacity = 1.0;
      }
      //ctx2.strokeStyle = "rgba(255,0,0," + opacity * 255 + ")";       
      ctx2.lineWidth = opacity * 10;
      ctx2.strokeStyle = "rgb(255,0,0)";
			ctx2.strokeRect(comp[i].x, comp[i].y, comp[i].width, comp[i].height);                    
      }
   setTimeout(poll, 1000);
   
}


onGotStream = function(stream) {
var url = webkitURL.createObjectURL(stream);
localVideo.style.opacity = 1; localVideo.src = url;
localStream = stream;

//trace("User has granted access to local media. url = " + url);
setTimeout(poll, 2000);
}

onFailedStream = function(error) {
alert("Failed to get access to local media. Error code was " + error.code + ".");
//trace_warning("Failed to get access to local media. Error code was " + error.code);
} 


setTimeout(initialize, 1);
</script>
                      
  <video id="localVideo" autoplay="autoplay"></video>
  <canvas width="1000" height="1000" id="localCanvas"></canvas>      
  <a href="http://www.webrtc.org"><img id="logo" alt="WebRTC" src="../images/webrtc_black_20p.png"></a>
  <a href="http://liuliu.me/eyes/javascript-face-detection-explained"><div id="credit">JS Face Detect by Liu Liu</div></a>
</body>
</html>
